<template>
  <div style="padding: 0px 20px 20px; width: 100%; height: 100%; display: flex; flex-direction: column" class="tl">
    <div class="fx user_edit_card">
      <img style="width: 50px; height: 50px; margin-right: 12px; border-radius: 50%" :src="imgError(base.avatar)" />
      <div>
        <p class="mar_bottom_5">
          <b style="font-size: 16px">{{ base.username }}</b>
          <el-tag type="" effect="plain" size="mini" class="mar_lf_10"> ID{{ base.id }} </el-tag>
          <el-tag type="danger" effect="plain" size="mini" class="mar_lf_10">
            {{ base.rating_cn }}
          </el-tag>
        </p>
        <p style="color: #999999">
          <span>昵称：{{ base.nickname || "---" }}</span>
          <span class="mar_lf_15">
            手机号码：<span id="user_tel">{{ base.tel || "---" }}</span>
            <i class="el-icon-document-copy" style="font-size: 14px; padding-left: 6px" @click="copy_tjm('user_tel')"></i>
          </span>
          <span class="mar_lf_15">
            推荐人：<span id="user_account">{{ base.tid_cn || "----" }}</span>
            <span v-if="base.tid_nickname"> [{{ base.tid_nickname || "----" }}] </span>
            <i class="el-icon-document-copy" style="font-size: 14px; padding-left: 6px" @click="copy_tjm('user_account')"></i>
          </span>
        </p>
      </div>
      <div class="fx user_edit_card_1">
        <p>注册时间：{{ base.created_time | getTimeFormat }}</p>
        <p>最近登录时间：{{ base.update_time | getTimeFormat }}</p>
      </div>
    </div>

    <div v-if="$store.state.plugin && $store.state.plugin.qyyy && $store.state.plugin.qyyy.is_open == 1 && index.staff_lists && index.staff_lists.length > 0" class="user_edit_staff">
      <p>跟进记录人员</p>
      <div class="fx">
        <div class="fx" v-for="(item, i) in index.staff_lists" :key="i">
          <img :src="imgError(item.staff_avatar)" />
          <div>
            <p>{{ item.name || item.staff_nickname || item.staff_username }}</p>
            <p>
              {{ item.created_time | getTimeFormat }}
            </p>
          </div>
        </div>
        <p class="line"></p>
      </div>
    </div>

    <el-tabs v-model="acIndex">
      <el-tab-pane label="客户信息" name="1"></el-tab-pane>
      <el-tab-pane label="操作记录" name="2"></el-tab-pane>
      <el-tab-pane label="跟进记录" name="3" v-if="$store.state.plugin && $store.state.plugin.qyyy && $store.state.plugin.qyyy.is_open == 1"></el-tab-pane>
      <el-tab-pane label="收款信息" name="11" v-if="open_btn.indexOf('收款信息') >= 0"></el-tab-pane>
      <el-tab-pane label="消费能力" name="4"></el-tab-pane>
      <el-tab-pane label="市场能力" name="5"></el-tab-pane>
      <el-tab-pane label="签到记录" name="6" v-if="$store.state.plugin && $store.state.plugin.sqhb && $store.state.plugin.sqhb.is_open == 1"></el-tab-pane>
      <el-tab-pane label="优惠券" name="10"></el-tab-pane>
      <el-tab-pane label="虚拟币明细" name="7" v-if="$store.state.plugin && $store.state.plugin.xnbkj && $store.state.plugin.xnbkj.is_open == 1"></el-tab-pane>
      <el-tab-pane label="司机数据" name="8" v-if="$store.state.plugin && $store.state.plugin.xnbkj && $store.state.plugin.xnbkj.is_open == 1"></el-tab-pane>
      <el-tab-pane label="用户代驾订单" name="9" v-if="$store.state.plugin && $store.state.plugin.xnbkj && $store.state.plugin.xnbkj.is_open == 1"></el-tab-pane>
    </el-tabs>

    <div class="usr_edit_over">
      <!-- 收款信息 -->
      <template v-if="acIndex == 11 && open_btn.indexOf('收款信息') >= 0">
        <el-row class="tl user_edit_edit" v-if="real_show">
          <el-form label-width="140px">
            <el-col :span="12">
              <el-form-item label="银行账户：">
                <el-input v-model="edit_info.bank_card" clearable size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开户姓名：">
                <el-input v-model="edit_info.bank_name" clearable size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开户银行：">
                <el-select v-model="edit_info.bank" size="small">
                  <el-option v-for="item in banks" :key="item" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开户网点：">
                <el-input v-model="edit_info.bank_network" clearable size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开户省市：">
                <city-cascader :level="1" size="small" :placeholder="[edit_info.bank_province, edit_info.bank_city].join('-')" @change="Rolechanges" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="支付宝账号：">
                <el-input v-model="edit_info.alipay" clearable size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="支付宝认证姓名：">
                <el-input v-model="edit_info.alipay_name" clearable size="small"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="微信号：">
                <el-input v-model="edit_info.wechat" clearable size="small"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="支付宝收款二维码：">
                <el-input v-model="edit_info.alipay_pic" clearable size="small"></el-input>
                <uploadpic :piclink="edit_info.alipay_pic" :width="150" :height="150" :is_more="false" @send_pic="onSuccess_alipay_pic"></uploadpic>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="微信收款二维码：">
                <el-input v-model="edit_info.wechat_pic" clearable size="small"></el-input>
                <uploadpic :piclink="edit_info.wechat_pic" :width="150" :height="150" :is_more="false" @send_pic="onSuccess_wechat_pic"></uploadpic>
              </el-form-item>
            </el-col>

            <el-col :span="24" class="tc mar_top_20">
              <el-button @click="real_show = false" size="small">取消</el-button>
              <el-button type="primary" @click="addUpdateReal" :loading="$store.state.isLoading" size="small"> 确定 </el-button>
            </el-col>
          </el-form>
        </el-row>

        <template v-else>
          <div class="fx" style="margin: 10px 0 20px">
            <div class="user_edit_tit">银行卡</div>
            <div>
              <p class="fx user_edit_icon" @click="userReal" v-if="!real_show">
                <i class="el-icon-edit"></i>
                修改
              </p>
            </div>
          </div>

          <el-row class="tl user_edit_info">
            <el-form label-width="170px">
              <el-col :span="12">
                <el-form-item label="银行账户：">
                  {{ base.bank_card || "----" }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="开户姓名：">
                  {{ base.bank_name || "----" }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="开户银行：">
                  {{ base.bank || "----" }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="开户省市："> {{ base.bank_province || "--" }}{{ base.bank_city || "--" }} </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="开户网点：">
                  {{ base.bank_network || "----" }}
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>

          <div class="fx" style="margin: 10px 0 20px">
            <div class="user_edit_tit">支付宝</div>
            <div></div>
          </div>
          <el-row class="tl user_edit_info">
            <el-form label-width="170px">
              <el-col :span="12">
                <el-form-item label="支付宝账号：">
                  {{ base.alipay || "----" }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="支付宝认证姓名：">
                  {{ base.alipay_name || "----" }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="收款二维码：">
                  <img :src="$fnc.getImgUrl(base.alipay_pic)" style="width: 150px; height: 150px; object-fit: cover" v-if="base.alipay_pic" />
                  <span v-else>----</span>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>

          <div class="fx" style="margin: 10px 0 20px">
            <div class="user_edit_tit">微信</div>
            <div></div>
          </div>
          <el-row class="tl user_edit_info">
            <el-form label-width="170px">
              <el-col :span="12">
                <el-form-item label="微信号：">
                  {{ base.wechat || "----" }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="收款二维码：">
                  <img :src="$fnc.getImgUrl(base.wechat_pic)" style="width: 150px; height: 150px; object-fit: cover" v-if="base.wechat_pic" />
                  <span v-else>----</span>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
        </template>
      </template>

      <!-- 跟进记录 -->
      <template v-if="acIndex == 3">
        <div class="fx" style="margin: 10px 0 20px">
          <div class="user_edit_tit">跟进信息</div>
          <div></div>
        </div>

        <div class="user_edit_timeline">
          <div class="fx" v-for="(item, i) in index.staff_record" :key="i">
            <div class="fx timeline_dot">
              <p>
                {{ item.created_time | getTimeFormat4 }}
              </p>
              <p>
                {{ item.created_time | getTimeFormat3 }}
              </p>
            </div>
            <div class="timeline_line" v-if="i != index.staff_record.length - 1"></div>
            <div class="timeline_con">
              <p class="fx">
                <img :src="imgError(item.staff_avatar)" />
                <span style="color: #409eff; font-size: 15px">{{ item.name || item.staff_nickname || item.staff_username }}</span>
                <el-tag type="" effect="plain" size="mini" class="mar_lf_10"> 员工 </el-tag>
                <el-tag type="info" effect="plain" size="mini" class="mar_lf_10">
                  {{ item.created_time | getTimeFormat5 }}
                </el-tag>
                <i class="el-icon-delete" style="margin-left: auto; margin-right: 15px; color: #999999; font-size: 16px" @click="del_staff_record(item.id)"></i>
              </p>
              <p style="margin-top: 12px">
                {{ item.record || "----" }}
              </p>
            </div>
          </div>
        </div>
      </template>
      <!-- 操作记录 -->
      <template v-if="acIndex == 2">
        <div class="fx" style="margin: 10px 0 20px">
          <div class="user_edit_tit">客户足迹</div>
          <div></div>
        </div>

        <div class="user_edit_timeline">
          <div class="fx" v-for="(item, i) in index.footprint" :key="i">
            <div class="fx timeline_dot">
              <p>
                {{ item.created_time | getTimeFormat4 }}
              </p>
              <p>
                {{ item.created_time | getTimeFormat3 }}
              </p>
            </div>
            <div class="timeline_line" v-if="i != index.footprint.length - 1"></div>
            <div class="timeline_con">
              <p class="fx">
                <span style="color: #409eff; font-size: 15px">{{ item.types }}</span>
                <el-tag type="success" effect="plain" size="mini" class="mar_lf_15"> ID{{ item.pid }} </el-tag>
                <el-tag type="info" effect="plain" size="mini" class="mar_lf_15">
                  {{ item.created_time | getTimeFormat5 }}
                </el-tag>

                <i class="el-icon-delete" style="margin-left: auto; margin-right: 15px; color: #999999; font-size: 16px" @click="del_footprint(item.id)"></i>
              </p>
              <p style="margin-top: 12px">
                {{ item.title || "----" }}
              </p>
            </div>
          </div>
        </div>
      </template>
      <!-- 优惠券 -->
      <template v-if="acIndex == 10">
        <div class="fx" style="margin: 10px 0 20px">
          <div class="user_edit_tit">详细信息</div>
          <div></div>
        </div>
        <el-table ref="multipleTable" :data="index.coupon" stripe tooltip-effect="dark" style="width: 99%">
          <el-table-column label="券码" min-width="140">
            <template slot-scope="scope">{{ scope.row.coupon_num }}</template>
          </el-table-column>
          <el-table-column label="类型" min-width="80">
            <template slot-scope="scope">{{ scope.row.desc }}</template>
          </el-table-column>
          <el-table-column label="是否使用" min-width="80">
            <template slot-scope="scope">{{ scope.row.is_use == 0 ? "未使用" : "已使用" }}</template>
          </el-table-column>
          <el-table-column label="有效期" min-width="130">
            <template slot-scope="scope">
              {{ scope.row.begin_time | getTimeFormat }}
              -
              {{ scope.row.end_time | getTimeFormat }}
            </template>
          </el-table-column>
        </el-table>
      </template>

      <!-- 签到记录 -->
      <template v-if="acIndex == 6">
        <div class="fx" style="margin: 10px 0 20px">
          <div class="user_edit_tit">详细信息</div>
          <div></div>
        </div>
        <el-table ref="multipleTable" :data="index.sign_in" stripe tooltip-effect="dark" style="width: 99%">
          <el-table-column label="类型" min-width="150">
            <template slot-scope="scope">{{ scope.row.type || "签到" }}</template>
          </el-table-column>

          <el-table-column label="获得奖励" min-width="100">
            <template slot-scope="scope">{{ scope.row.score }}</template>
          </el-table-column>

          <el-table-column label="额外获得奖励" min-width="100">
            <template slot-scope="scope">{{ scope.row.score_plus }}</template>
          </el-table-column>

          <el-table-column label="签到时间" min-width="100">
            <template slot-scope="scope">{{ scope.row.created_time | getTimeFormat }}</template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 市场能力 -->
      <template v-if="acIndex == 5">
        <div class="fx" style="margin: 10px 0 20px">
          <div class="user_edit_tit">详细信息</div>
          <div></div>
        </div>
        <el-row class="tl user_edit_info">
          <el-form label-width="170px">
            <el-col :span="12">
              <el-form-item label="直推人数："> {{ sc.ynumber || "0" }}人 </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="总人数："> {{ sc.znumber || "0" }}人 </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="直推分销："> {{ sc.yvip || "0" }}人 </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="总分销："> {{ sc.zvip || "0" }}人 </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="直推业绩：">
                {{ sc.ysales || "0" }}
              </el-form-item>
            </el-col>
<!--            <el-col :span="12">-->
<!--              <el-form-item label="团队业绩：">-->
<!--                {{ sc.zsales || "0" }}-->
<!--              </el-form-item>-->
<!--            </el-col>-->
            <el-col :span="12">
              <el-form-item label="直推会员商城业绩：">
                {{ sc.ysales_vip || "0" }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="团队会员商城业绩：">
                {{ sc.zsales_vip || "0" }}
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>

        <div class="fx" style="margin: 10px 0 20px">
          <div class="user_edit_tit">资金记录</div>
          <div></div>
        </div>
        <el-table ref="multipleTable" :data="index.money" stripe tooltip-effect="dark" style="width: 99%">
          <el-table-column label="订单信息" min-width="180">
            <template slot-scope="scope">
              <div class="tab_div">
                <div>
                  <span>订单号：</span>
                  <span>{{ scope.row.oid }}</span>
                </div>
                <div>
                  <span>时间：</span>
                  <span>{{ scope.row.created_time | getTimeFormat }}</span>
                </div>
                <div>
                  <span>备注：</span>
                  <span>{{ scope.row.remark || "----" }}</span>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="资金" min-width="140">
            <template slot-scope="scope">
              <div class="tab_div">
                <div>
                  <span>资金增减：</span>
                  <span>
                    {{ scope.row.money | keepTwoNum }}
                    {{ scope.row.style_cn }}
                  </span>
                </div>
                <div>
                  <span>剩余资金：</span>
                  <span>
                    {{ scope.row.balance | keepTwoNum }}
                    {{ scope.row.style_cn }}
                  </span>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="来源" min-width="160">
            <template slot-scope="scope">
              <div class="tab_div">
                <div>
                  <span>来源账号：</span>
                  <span @click="func_1(scope.row.uid)" style="cursor: pointer">{{ scope.row.ly_name }}</span>
                </div>
                <div>
                  <span>来源昵称：</span>
                  <span>{{ scope.row.ly_nickname || "----" }}</span>
                </div>
                <div>
                  <span>来源等级：</span>
                  <span class="rat" v-show="scope.row.ly_rating_cn">{{ scope.row.ly_rating_cn }}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="资金类型" align="center" min-width="100">
            <template slot-scope="scope">
              <div class="tab_div">
                <div>
                  <span>{{ moneyType(scope.row.cate) }}</span>
                  <span></span>
                </div>
                <div>
                  <span></span>
                  <span class="rat" :class="[scope.row.style == '积分抵用' ? 'lei_red' : scope.row.style == '加佣金' ? 'tx' : 'sh']">
                    {{ scope.row.style }}
                  </span>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 消费能力 -->
      <template v-if="acIndex == 4">
        <div class="fx" style="margin: 10px 0 20px">
          <div class="user_edit_tit">详细信息</div>
          <div></div>
        </div>
        <el-row class="tl user_edit_info">
          <el-form label-width="170px">
            <el-col :span="12">
              <el-form-item label="总出订单："> {{ xf.zcdd }}笔 </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="总消费金额："> {{ xf.zxfjr | keepTwoNum }}元 </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="本月订单："> {{ xf.dydd || 0 }}笔 </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="本月消费金额："> {{ xf.byxf || 0 }}元 </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="累加充值：">
                {{ base.sum_money | keepTwoNum }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="累计佣金：">
                {{ base.sum_amount | keepTwoNum }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="累计积分：">
                {{ base.sum_integral | keepTwoNum }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="会员商城总出订单：">
                {{ base.zcdd_vip || 0 }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="会员商城消费：">
                {{ base.buy_vip | keepTwoNum }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="一次性最高消费会员商品：">
                {{ base.highest | keepTwoNum }}
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="index.driving_id">
              <el-form-item label="代驾订单数：">
                {{ base.driving_number | getTimeFormat }}
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="index.driving_id">
              <el-form-item label="代驾金额：">
                {{ base.driving_money | getTimeFormat }}
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>

        <div class="fx" style="margin: 10px 0 20px">
          <div class="user_edit_tit">订单记录</div>
          <div></div>
        </div>
        <el-table ref="multipleTable" :data="index.order" stripe tooltip-effect="dark" style="width: 99%">
          <el-table-column label="订单号" min-width="140">
            <template slot-scope="scope">
              <router-link :to="'/index/order?oid=' + scope.row.oid">
                <span style="color: #1c89d5">{{ scope.row.oid }}</span>
              </router-link>
            </template>
          </el-table-column>

          <el-table-column label="总价" min-width="100">
            <template slot-scope="scope">{{ scope.row.money | keepTwoNum }}</template>
          </el-table-column>

          <el-table-column label="下单时间" min-width="120">
            <template slot-scope="scope">{{ scope.row.created_time | getTimeFormat }}</template>
          </el-table-column>

          <el-table-column label="状态" min-width="80">
            <template slot-scope="scope">{{ scope.row.status }}</template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 客户信息 -->
      <template v-if="acIndex == 1">
        <el-row class="tl user_edit_edit" v-if="edit_show">
          <el-form label-width="120px">
            <el-col :span="12">
              <el-form-item label="用户昵称：">
                <el-input v-model="edit_info.nickname" clearable size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机号码：">
                <el-input v-model="edit_info.tel" clearable size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="会员头像：">
                <el-input v-model="edit_info.avatar" clearable size="small"></el-input>
                <uploadpic :piclink="edit_info.avatar" :width="150" :height="150" :is_more="false" @send_pic="onSuccess"></uploadpic>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="固定等级：">
                <el-radio v-model="edit_info.designation" label="0">否</el-radio>
                <el-radio v-model="edit_info.designation" label="1">是</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="站长：">
                <el-radio v-model="edit_info.is_webmaster" label="0">否</el-radio>
                <el-radio v-model="edit_info.is_webmaster" label="1">是</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="管理备注：">
                <el-input type="textarea" v-model="edit_info.admin_remark" clearable size="small"></el-input>
              </el-form-item>
            </el-col>

            <template v-if="open_btn.indexOf('实名认证') >= 0">
              <el-col :span="12">
                <el-form-item label="真实姓名：">
                  <el-input v-model="edit_info.name" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="身份证号码：">
                  <el-input v-model="edit_info.card" clearable size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="身份证正面照：">
                  <el-input v-model="edit_info.card_face" clearable size="small"></el-input>
                  <uploadpic :piclink="edit_info.card_face" :width="240" :height="140" :is_more="false" @send_pic="onSuccess_card_face"></uploadpic>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="身份证背面照：">
                  <el-input v-model="edit_info.card_bg" clearable size="small"></el-input>
                  <uploadpic :piclink="edit_info.card_bg" :width="240" :height="140" :is_more="false" @send_pic="onSuccess_card_bg"></uploadpic>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="所在省市区：">
                  <city-cascader :level="3" size="small" :placeholder="[edit_info.province, edit_info.city, edit_info.area, edit_info.town].join('-')" @change="handleChange" />
                </el-form-item>
              </el-col>
            </template>

            <el-col :span="24" class="tc mar_top_20">
              <el-button @click="edit_show = false" size="small"> 取消 </el-button>
              <el-button type="primary" @click="addUpdate" :loading="$store.state.isLoading" size="small"> 确定 </el-button>
            </el-col>
          </el-form>
        </el-row>

        <template v-else>
          <div class="fx" style="margin: 10px 0 20px">
            <div class="user_edit_tit">详细信息</div>
            <div class="fx">
              <p class="fx user_edit_icon" @click="userEdit" v-if="!edit_show">
                <i class="el-icon-edit"></i>
                修改
              </p>
            </div>
          </div>
          <el-row class="tl user_edit_info">
            <el-form label-width="140px">
              <el-col :span="12">
                <el-form-item label="所属国家："> （{{ base.quhao }}）{{ base.quhao == 86 ? "中国" : "" }} </el-form-item>
              </el-col>
              <el-col :span="12" v-if="$store.state.plugin && $store.state.plugin.shbxt && $store.state.plugin.shbxt.is_open == 1">
                <el-form-item label="是否为供应商：">
                  {{ base.is_supplier == 1 ? "是" : "否" }}
                </el-form-item>
              </el-col>

              <el-col :span="12" v-if="$store.state.plugin && $store.state.plugin.gbfx && $store.state.plugin.gbfx.is_open == 1">
                <el-form-item label="是否为代理商：">
                  {{ base.is_agent > 0 ? "是" : "否" }}
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="$store.state.plugin && $store.state.plugin.xnbkj && $store.state.plugin.xnbkj.is_open == 1">
                <el-form-item label="虚拟币等级：">
                  {{ base.coin_rating_cn || "----" }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否固定等级：">
                  {{ base.designation == 1 ? "是" : "否" }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否为站长：">
                  {{ base.is_webmaster == 1 ? "是" : "否" }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="管理备注：">
                  {{ base.admin_remark || "----" }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="注册来源：">
                  {{ base.source || "----" }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="注册IP：">
                  {{ base.reg_ip || "----" }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="注册地区：">
                  {{ base.reg_ip_address || "----" }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="最近登录IP：">
                  {{ base.last_ip || "----" }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="登录地区：">
                  {{ base.last_ip_address || "----" }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="openid：">
                  {{ base.openid || "----" }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="微信unionid：">
                  {{ base.unionid || "----" }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="微信小程序openid：">
                  {{ base.applets_openid || "----" }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="微信app_openid：">
                  {{ base.app_openid || "----" }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="支付宝app_openid：">
                  {{ base.zfb_openid || "----" }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="支付宝用户ID：">
                  {{ base.zfb_user_id || "----" }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="抖音小程序openid：">
                  {{ base.tt_openid || "----" }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="抖音小程序unionid：">
                  {{ base.tt_unionid || "----" }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设备码UUID：">
                  {{ base.device || "----" }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="'升级' + base.rating_cn + '等级时间：'">
                  {{ base.upgrade_time | getTimeFormat }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="会员卡升级时间：">
                  {{ base.vip_upgrade_time | getTimeFormat }}
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="$store.state.plugin && $store.state.plugin.xnbkj && $store.state.plugin.xnbkj.is_open == 1">
                <el-form-item :label="'升级' + base.coin_rating_cn + '等级时间：'">
                  {{ base.coin_upgrade_time | getTimeFormat }}
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>

          <template v-if="open_btn.indexOf('实名认证') >= 0">
            <div class="fx" style="margin: 10px 0 20px">
              <div class="user_edit_tit">实名认证</div>
              <div></div>
            </div>

            <el-row class="tl user_edit_info">
              <el-form label-width="140px">
                <el-col :span="24">
                  <el-form-item label="所在省市区："> {{ base.province || "----" }}{{ base.city }}{{ base.area }}{{ base.town }} </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="认证姓名：">
                    {{ base.name || "----" }}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="身份证号码：">
                    {{ base.card || "----" }}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="身份证正面照：">
                    <img :src="$fnc.getImgUrl(base.card_face)" v-if="base.card_face" />
                    <span v-else>----</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="身份证背面照：">
                    <img :src="$fnc.getImgUrl(base.card_bg)" v-if="base.card_bg" />
                    <span v-else>----</span>
                  </el-form-item>
                </el-col>
              </el-form>
            </el-row>
          </template>
        </template>
      </template>
    </div>
  </div>
</template>

<script>
import banks from "../../assets/js/banks";
import cityCascader from "@/components/currency/cityCascader/cityCascader";
import uploadpic from "@/components/page/pic/up_pic";
export default {
  components: {
    uploadpic,
    cityCascader,
  },
  props: {
    editId: String,
    open_btn: Array,
  },
  data() {
    return {
      acIndex: "1",
      loading: false,
      base: {},
      xf: {},
      index: {},
      sc: {},
      edit_info: {},
      edit_show: false,
      real_show: false,
      banks: banks,
    };
  },
  mounted() {
    this.getDetails();
    console.log(this.open_btn);
  },
  methods: {
    addUpdateReal() {
      var params = this.edit_info || {};
      this.$api.getUser.collectionsSaveEdit(params).then((res) => {
        if (res.data.code == 200 && res.data.result != null) {
          this.$fnc.alertSuccess({ text: "操作成功" });
          this.real_show = false;
          this.getDetails();
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result);
        }
      });
    },
    addUpdate() {
      var params = this.edit_info || {};
      this.$api.getUser.userSaveEdit(params).then((res) => {
        if (res.data.code == 200 && res.data.result != null) {
          this.$fnc.alertSuccess({ text: "操作成功" });
          this.edit_show = false;
          this.getDetails();
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result);
        }
      });
    },
    Rolechanges(val) {
      this.edit_info.bank_province = val[0];
      this.edit_info.bank_city = val[1];
    },
    handleChange(value) {
      if (value) {
        for (var i = 0; i < value.length; i++) {
          if (i == 0) this.edit_info.province = value[i];
          if (i == 1) this.edit_info.city = value[i];
          if (i == 2) this.edit_info.area = value[i];
          if (i == 3) this.edit_info.town = value[i];
        }
      }
    },
    onSuccess_wechat_pic(pic) {
      this.edit_info.wechat_pic = pic;
    },
    onSuccess_alipay_pic(pic) {
      this.edit_info.alipay_pic = pic;
    },
    onSuccess_card_bg(pic) {
      this.edit_info.card_bg = pic;
    },
    onSuccess_card_face(pic) {
      this.edit_info.card_face = pic;
    },
    onSuccess(pic) {
      this.edit_info.avatar = pic;
    },
    userReal() {
      this.real_show = !this.real_show;
      if (this.real_show) {
        this.$api.getUser.collectionsEdit({ id: this.editId }).then((res) => {
          this.edit_info = res.data.result;
        });
      }
    },
    userEdit() {
      this.edit_show = !this.edit_show;
      if (this.edit_show) {
        this.$api.getUser.userEdit({ id: this.editId }).then((res) => {
          this.edit_info = res.data.result;
        });
      }
    },
    del_staff_record(id) {
      this.$swal({
        title: "您确定要删除这条信息吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思",
      }).then((willDelete) => {
        if (willDelete.value) {
          var data = { id: id };
          this.$api.getStation.staff_record_del(data).then((res) => {
            if (res.data.code == 200) {
              this.$fnc.alertSuccess({ text: "操作成功" });
              this.getDetails();
            } else {
              this.$fnc.alertError(res.data.code_desc, res.data.result);
            }
          });
        }
      });
    },
    del_footprint(id) {
      this.$swal({
        title: "您确定要删除这些信息吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思",
      }).then((willDelete) => {
        if (willDelete.value) {
          this.$api.getPage.del_footprintlist({ id_str: id }).then((res) => {
            if (res.data.code == 200) {
              this.$fnc.alertSuccess({ text: "操作成功" });
              this.getDetails();
            } else {
              this.$fnc.alertError(res.data.code_desc, res.data.result);
            }
          });
        }
      });
    },
    getDetails() {
      this.loading = true;
      if (!this.editId) {
        this.$fnc.alertError("用户ID缺失！");
        return false;
      }

      var params = {};
      params.id = this.editId;
      this.$api.getUser.getInfo(params).then((res) => {
        this.index = res.data.result;
        this.base = res.data.result.base;
        this.xf = res.data.result.xf;
        this.sc = res.data.result.sc;
        this.loading = false;
      });
    },
    copy_tjm(id) {
      var dom = document.getElementById(id);
      var span = dom.innerText;
      var oInput = document.createElement("input");
      oInput.value = span;
      document.body.appendChild(oInput);
      oInput.select();
      document.execCommand("Copy");
      oInput.className = "oInput";
      oInput.style.display = "none";
      this.$message.success("复制成功");
    },
    imgError(item) {
      if (!item) {
        return require("@/assets/img/default_head.png");
      }
      if (item.indexOf("http") >= 0) {
        return item;
      } else if (item.indexOf("api") >= 0) {
        return item;
      } else {
        return "/api/" + item;
      }
    },
    moneyType(cate) {
      var str = "";
      var reward = this.$store.state.rewardOption;
      for (var i in reward) {
        if (cate == reward[i].value) {
          str = reward[i].label;
          break;
        }
      }
      return str;
    },
  },
};
</script>

<style lang="less" scoped>
.user_edit_card {
  width: 100%;
  margin-bottom: 15px;
  justify-content: flex-start;
  background: #f9f9f9;
  border-radius: 8px;
  padding: 12px;
  flex-wrap: wrap;

  .user_edit_card_1 {
    width: 100%;
    margin-top: 15px;
    padding: 10px 0 0;
    border-top: 1px dashed #d1d1d1;
    font-size: 13px;
  }
}
.user_edit_tit {
  font-size: 15px;
  font-weight: bold;
  border-left: 4px solid #409eff;
  padding-left: 6px;
}
.user_edit_icon {
  font-size: 13px;
  color: #409eff;
  margin-left: 20px;
  cursor: pointer;
  i {
    margin-right: 6px;
  }
}
.user_edit_icon:hover {
  color: #59698d;
}

.user_edit_info {
  width: 100%;
  /deep/.el-form-item__label {
    color: #999999;
    font-size: 13px;
    padding: 0 5px 0 0;
    line-height: 20px;
  }
  /deep/.el-form-item__content {
    font-size: 13px;
    color: #000000;
    line-height: 20px;
  }
  .el-form-item {
    margin-bottom: 15px;
  }
}
.user_edit_edit {
  width: 100%;
  /deep/.el-form-item__label {
    color: #999999;
    font-size: 13px;
    padding: 0 5px 0 0;
  }
  /deep/.el-form-item__content {
    font-size: 13px;
    color: #000000;
  }
  .el-form-item {
    margin-bottom: 10px;
  }
}
.user_edit_timeline {
  width: 100%;
  > div {
    width: 100%;
    justify-content: flex-start;
    align-items: flex-start;
    padding-bottom: 30px;
    position: relative;
    z-index: 1;

    .timeline_line {
      position: absolute;
      border-left: 2px solid #cecece;
      bottom: -60px;
      height: 100%;
      left: 26px;
      z-index: 0;
    }

    .timeline_dot {
      width: 60px;
      height: 60px;
      background: #ffffff;
      border: 1px dashed #cecece;
      flex-direction: column;
      justify-content: center;
      border-radius: 6px;

      > p:nth-of-type(1) {
        font-size: 24px;
        font-weight: bold;
        color: #409eff;
      }
      > p:nth-of-type(2) {
        font-size: 12px;
        color: #999999;
      }
    }
    .timeline_con {
      width: 100%;
      padding-left: 20px;
      min-height: 60px;

      > p {
        width: 100%;
        justify-content: flex-start;

        > img {
          width: 26px;
          height: 26px;
          border-radius: 100%;
          margin-right: 10px;
        }

        > small {
          margin-left: 10px;
        }
      }

      > img {
        width: 100px;
        height: 100px;
        object-fit: cover;
        margin-top: 15px;
      }
    }
  }
}
.tab_div {
  font-size: 12px;
}
.usr_edit_over {
  width: 100%;
  overflow-y: auto;
}
.usr_edit_over::-webkit-scrollbar {
  display: none;
}
.user_edit_staff {
  width: 100%;
  border: 1px solid #dedede;

  > p {
    width: 100%;
    padding: 10px 14px;
    font-size: 17px;
    font-weight: bold;
    border-bottom: 1px solid #dedede;
  }

  > div {
    width: 100%;
    padding: 10px 0;
    position: relative;
    .line {
      position: absolute;
      border-top: 1px dashed #c0c4cc;
      top: 22px;
      left: 14px;
      right: 10px;
      z-index: 0;
    }
    > div {
      align-items: flex-start;
      justify-content: center;
      line-height: 1.6;
      position: relative;
      z-index: 1;
      padding: 0 10px;
      background: #ffffff;

      &:first-child {
        justify-content: flex-start;
      }
      &:last-child {
        justify-content: flex-end;
      }

      img {
        width: 22px;
        height: 22px;
        border-radius: 50%;
      }

      > div {
        padding-left: 8px;
        p:nth-of-type(1) {
          font-size: 15px;
          font-weight: bold;
        }
        p:nth-of-type(2) {
          font-size: 12px;
          color: #999999;
        }
      }
    }
  }
}
</style>
